<template>
    <ul class="user_Overview">
        <li class="user_Overview-item">
            <div class="user_Overview_nums allnum ">
                <div class="titles">
                    <p>总充电量/MWh</p>
                    <p class="right0">{{ sjlist?sjlist.quantity_charged:0}}</p>
                </div>
            </div>

        </li>
        <li class="user_Overview-item">
            <div class="user_Overview_nums online">
                <div class="titles">
                    <p>总放电量/MWh</p>
                    <p class="right1">{{ sjlist?sjlist.quantity_discharged:0 }} </p>
                </div>
            </div>

        </li>
    </ul>
</template>

<script>

export default {
    props: ['sjlist'],
    data() {
        return {
        }
    }
};
</script>
<style lang='scss' scoped>
.user_Overview {
    height: 100%;
    display: flex;
    /*垂直排列*/
    align-items: center;
    /*由于flex-direction: column，因此align-items代表的是水平方向*/
    justify-content: center;

    li {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;


        .user_Overview_nums {
            width: 213px;
            height: 121px;
            background-size: cover;
            background-position: center center;
            position: relative;
        }

        .allnum {
            background-image: url("../../assets/img/icon_qklkf.png");
        }

        .online {
            background-image: url("../../assets/img/icon_wlw.png");
        }

        .titles {
            position: absolute;
            left: 103px;
            top: 48px;

            .right0 {

                background: linear-gradient(180deg, #FFFFFF 0%, #1D90FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .right1 {

                background: linear-gradient(180deg, #FFFFFF 0%, #FF830A 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            p {
                text-align: left;
                font-style: normal;

                &:first-child {
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 16px;
                    /* text-transform: none; */

                }

                &:last-child {
                    font-weight: bold;
                    font-size: 20px;
                    line-height: 23px;
                    text-align: left;
                    margin-top: 10px;
                }


            }
        }
    }
}
</style>
